<template>
    <div>
        <div class="sy-tit">订单全寿命周期实时利率分布</div>
        <div id="myChart" style="width:1000;height:300px; margin:0 auto;margin-bottom:-60px"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.InitChart()
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 指定图表的配置项和数据
            var option = {
                color: ['#caf982', '#8080ff', '#ed818e'],
                tooltip: {
                    trigger: 'xAxis', // 若需要使用默认的『显示』『隐藏』触发规则，则可以去掉trigger的配置
                    axisPointer: { type: 'cross', show: true },
                    formatter: '{a}{b}{c}', // 默认触发规则中散点展示的内容，{a}标题;{b}X坐标;{c}Y坐标
                },
                legend: {
                    data: ['单个供应商', '单笔订单', '实时平均价'],
                    orient: 'horizontal',
                    x: 'center',
                    y: 'center',
                    top: 0,
                },
                grid: {
                    right: 5,
                    left: 5,
                    top: 45,
                    containLabel: true,
                },
                // xAxis: [
                //     {
                //         type: 'category',
                //         data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                //         axisPointer: {
                //             type: 'shadow',
                //         },
                //         axisLabel: {
                //             show: true,
                //             textStyle: {
                //                 color: '#595C61',
                //             },
                //             rotate: 45,
                //         },
                //         axisLine: {
                //             show: true,
                //         },
                //     },
                // ],
                xAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 35,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                        show: false,
                    },
                    // {
                    //     type: 'value',
                    //     scale: true,
                    //     axisLabel: {
                    //         formatter: '{value}%',
                    //     },
                    //     // splitLine: {
                    //     //     show: false
                    //     // }
                    // },
                    // {
                    //     type: 'value',
                    //     scale: true,
                    //     axisLabel: {
                    //         formatter: '{value}%',
                    //     },
                    //     // splitLine: {
                    //     //     show: false
                    //     // }
                    // },
                    {
                        type: 'category',
                        data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                        offset: -145,
                    },
                ],

                yAxis: [
                    {
                        type: 'value',
                        name: '占权比重',
                        min: 0,
                        max: 15,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                    },
                ],

                series: [
                    {
                        type: 'effectScatter',
                        symbolSize: 10,
                        data: [[2.6, 3.6]],
                        color: '#EE0000',
                    },
                    {
                        name: '实时平均价',
                        type: 'line',
                        smooth: true,
                        data: [
                            [2.6, 3.6],
                            [6.6, 4.6],
                            [12.6, 5.1],
                            [16.3, 5.3],
                            [22.3, 10.1],
                            [28.6, 3.6],
                            [30.8, 9.1],
                        ],
                        color: '#ed818e',
                    },
                    {
                        name: '单个供应商',
                        type: 'scatter',
                        data: [
                            [2.5, 2.6],
                            [2.7, 3.01],
                            [3.1, 3.2],
                            [2.7, 3.3],
                            [6.1, 4.2],
                            [6.5, 4.2],
                            [6.7, 4.3],
                        ],
                        color: '#caf982',
                        symbolSize: 10,
                    },
                    {
                        name: '单笔订单',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series',
                        },
                        data: [
                            [12.7, 5.4],
                            [12.1, 5.2],
                            [12.5, 4.3],
                            [12.7, 5.3],
                            [12.9, 5.3],
                            [13.1, 5.6],
                            [16.1, 5.6],
                            [16.4, 5.6],
                            [16.6, 6.0],
                            [22.4, 9.6],
                            [22.6, 9.9],
                            [22.8, 10.5],
                            [22.8, 10.6],
                            [28.8, 2.5],
                            [28.8, 3.1],
                            [30.8, 9.1],
                        ],
                        color: '#8080ff',
                        symbolSize: 12,
                    },
                ],
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.sy-tit {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #666666;
    margin-top: 20px;
}
</style>